<template>
	<el-form :model="formData" ref="formRef" :rules="formRules" label-width="8rem">
		<el-row type="flex" :gutter="10">
			
			<el-col :span="12">
				<el-form-item label="活动名称" prop="activity_name">
					<el-input
					    v-model="formData.activity_name"
					    clearable
					    placeholder="请输入活动名称"
					></el-input>
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<el-form-item label="活动人数" prop="activity_num">
					<el-input
					    v-model="formData.activity_num"
						type="number"
					    clearable
					    placeholder="请输入活动人数"
					></el-input>
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<el-form-item label="活动时间" prop="apply_time">
					<el-date-picker
					      v-model="formData.apply_time"
					      type="datetimerange"
					      start-placeholder="开始日期"
					      end-placeholder="结束日期"
						  value-format="timestamp">
					    </el-date-picker>
				</el-form-item>
			</el-col>
			<!-- 是否需要核销 0否 1是 -->
			<el-col :span="12" >
				<el-form-item label="是否需要核销" prop="is_scan">
					<el-radio-group v-model="formData.is_scan">
						<el-radio :label="0">否</el-radio>
						<el-radio :label="1">是</el-radio>
					</el-radio-group>
				</el-form-item>
			</el-col>
			<el-col :span="24">
				<el-form-item label="活动图" prop="activity_img">
					<el-upload-image v-model="formData.activity_img" :limit="5" :title="title"></el-upload-image>
				</el-form-item>
			</el-col>
			<el-col :span="24">
			    <el-form-item prop="content" label="详情">
			        <div style="border: 1px solid #ccc;">
			            <Toolbar
			                style="border-bottom: 1px solid #ccc"
			                :editor="editor"
			                :defaultConfig="toolbarConfig"
			                :mode="mode"
			            />
			            <Editor
			                style="height: 500px; overflow-y: auto;"
			                v-model="formData.content"
			                :defaultConfig="editorConfig"
			                :mode="mode"
			                @onCreated="onCreated"
			            />
			        </div>
			    </el-form-item>
			</el-col>
		</el-row>
		<el-row type="flex" justify="center">
			<el-button type="primary" icon="el-icon-check" @click="onConfirm">确认</el-button>
			<el-button type="default" icon="el-icon-close" @click="onCancel">取消</el-button>
		</el-row>
	</el-form>
</template>

<script>
	import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
	export default {
		name: "member-search",
		props: {
			formData: {
				type: Object,
				default: () => {}
			},
		},
		components: {
			"el-upload-image": () => import("@/components/el-upload-image.vue"),
			Editor,
			Toolbar
		},
		data() {
			return {
				formRules: {
					activity_name: [{required: true,message: '请输入',trigger: 'change'}],
					activity_num: [{required: true,message: '请输入',trigger: 'change'}],
					activity_img: [{required: true,message: '请选择',trigger: 'change'}],
					apply_time: [{required: true,message: '请选择',trigger: 'change'}],
					is_scan: [{required: true,message: '请选择',trigger: 'change'}],
					content: [{required: true,message: '请输入',trigger: 'change'}],
				},
				editor: null,
				toolbarConfig: {},
				editorConfig: {
				    MENU_CONF: {
				        uploadImage: {
				            fieldName: "file",
				            server: "/admin/ajax/upload",
				            headers: {
				                batoken: this.$store.state.token
				            },
				            /* eslint-disable-next-line */
				            customInsert(res, insertFn) {
				                insertFn(
				                    "//zdcloud.zxkjnc.com" + res.data.file.url
				                );
				            }
				        }
				    }
				},
				mode: "default",
				title:'请上传750*700比例图片'
			};
		},
		beforeDestroy() {//title
		    const editor = this.editor;
		    if (editor == null) return;
		    editor.destroy();
		},
		methods: {
			onCreated(editor) {
			    this.editor = Object.seal(editor);
			},
			onConfirm() {
				this.$refs.formRef.validate((valid) => {
					if (valid) {
						// alert('submit!');
						console.log(this.formData)
						this.formData.activity_img = this.formData.activity_img.map(item=>item=item.url)
						this.formData.activity_img = this.formData.activity_img.join(',')
						this.formData.apply_time = this.formData.apply_time.map(item=>item=item/1000)
						this.formData.apply_time = this.formData.apply_time.join('-')
						this.$emit("search", this.formData);
						this.$parent.$emit("update:visible", false);
						this.$refs.formRef.resetFields()
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
			onCancel() {
				this.$parent.$emit("update:visible", false);
				this.$refs.formRef.resetFields();
			}
		}
	};
</script>
<style src="@wangeditor/editor/dist/css/style.css"></style>
